<template>
<div id="eventManager">
  <v-header class="pd-left15" title="系统设置" :showDownloadBtn = "download" :saveShow = "save"></v-header>
  <div class="container_wrap">
  <el-container class="container-box">
    <el-header height="50px" class="header-tool-bar">
      <!-- 按钮 -->
      <el-row class="toolbar">
        <el-col :span="12">
          <el-button type="primary" size="mini" @click="adddialogForm">增加</el-button>
          <el-button type="primary" size="mini" @click.stop="removedata">删除</el-button>
          <el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>
          <el-button type="primary" size="mini" @click="refresh">刷新</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="main-table-box">
      <!-- 表单 -->
      <el-table
        ref="table"
        :data="tableData"
        @selection-change="handleSelectionChange"
        @select="checkrow"
        v-model="checked"
        v-loading="tableLoading"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="sys_name"
          label="系统名称"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="sys_no"
          label="系统编号"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="icon_id"
          label="logo"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="sys_url"
          label="url地址"
          width="auto">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="totalCount">
        </el-pagination>
    </el-main>
  </el-container>
  </div>
  <!-- 新增/编辑-弹窗 -->
    <el-dialog :title="addRoleDialogMode === 'ADD' ? '新增设置' : '编辑设置'"
               :visible.sync="addRoleDialogVisiable"
               v-model="addRoleDialogMode"
               @close="cancel"
               width="900px"
               >
      <el-form :model="ruleForm" :rules="rules"  ref="ruleForm" label-width="140px" class="demo-ruleForm">
        <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="系统名称" prop="sys_name">
          <el-input v-model="ruleForm.sys_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="logo" prop="icon_id">
          <el-input v-model="ruleForm.icon_id"
          :disabled="editsysid"></el-input>
        </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="系统编号" prop="sys_no">
            <el-input v-model="ruleForm.sys_no" :disabled="!(addRoleDialogMode === 'ADD')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
           <el-form-item label="url地址" prop="sys_url">
           <el-input v-model="ruleForm.sys_url" ></el-input>
           </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="dialogbtn">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="cancel('ruleForm')">关闭</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</div>
</template>

<script>
  import '../../../assets/css/mixinParameterManager.styl'
  import ajax from '../../../api/ajax/ajax'
  import {VHeader} from '../../../components'
  import api from '../../../api/url'
export default{
  name: 'system-list',
  components: {
    VHeader
  },
  data () {
      return {
        tableLoading: true,
        condition: '', // 输入条件
        addRoleDialogVisiable: false,
        editdialogform: false,
        currentPage: 1, // 当前页码
        pagesize: 10, // 默认每页数据量
        totalCount: 0, // 默认数据总数
        editmetaid: false, // meta_id input框禁止修改
        editsysid: false, // event_id input框禁止修改
        checked: false,
        tableData: [],
        checkbox: [],
        addRoleDialogMode: 'ADD', // 对话框色对话框模式  ADD新增 MODIFY 修改
        list: [],
        download: false,
        save: false,
        ruleForm: {
          sys_name: '',
          icon_id: '',
          sys_no: '',
          sys_url: '',
          id: ''
        },
        rules: {
          sys_name: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入18个字符', trigger: 'blur' }
          ],
          sys_no: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入30个字符', trigger: 'blur' }
          ],
          icon_id: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' }
          ],
          sys_url: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入50个字符', trigger: 'blur' }
          ]
        },
        currentItem: {}
      }
    },
    created () {
      this.queryForPage()
    },
    methods: {
      // 每页显示条目个数
      handleSizeChange (val) {
        this.pagesize = val
        this.handleCurrentChange()
      },
      queryForPage () {
         const pagelistdata = {
            pageNo: this.currentPage,
            pageSize: this.pagesize
        }
        ajax.post(api.SEARCH_SYS_APP, pagelistdata).then((res) => {
          this.tableLoading = false
          this.tableData = []
          this.tableData = res.data.list
          this.totalCount = res.data.total
          this.checked = false // 清除选中状态
        })
      },
      // 当前页数
      handleCurrentChange (val) {
        this.currentPage = val
        this.queryForPage()
      },
      // 增加按钮
      adddialogForm () {
        this.ruleForm = {}
        this.currentItem = {}
        this.$refs.table.clearSelection() // 点击新增清除选中状态
        this.checked = false
        this.addRoleDialogVisiable = true
        this.addRoleDialogMode = 'ADD'
        this.editmetaid = false
        this.editsysid = false
      },
      // 关闭
      cancel (formName) {
        // this.$refs.ruleForm.clearValidate()
        // this.ruleForm = {}
        this.$refs.ruleForm.resetFields() // 移除校验 重置为初始状态
        this.addRoleDialogVisiable = false
        this.editdialogform = false
        this.ruleForm = this.currentItem
        this.checked = false
        this.handleSizeChange()
      },
         // 重置
      resetForm () {
    this.ruleForm = {...this.currentItem}
    this.$refs.ruleForm.clearValidate()
      },
      // 删除数据
      removedata () {
        if (this.list.length > 0) {
          this.$confirm('是否删除该记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let idList = this.list.map(item => item.id)
            let remdata = {
              key_list: idList
            }
            ajax.post(api.DELETE_SYS_APP, remdata).then((res) => {
              this.handleSizeChange()
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }).catch(() => {
            // 去掉取消删除提示
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // })
          })
        } else {
          this.$message.error('请至少选择一条记录进行删除')
        }
      },
      handleSelectionChange (val) {
        this.list = []
        for (let i = 0; i < val.length; i++) {
          let remdata = {
            sys_name: val[i].sys_name,
            id: val[i].id
          }
          this.list.push(remdata)
        }
      },
      checkrow (row) {
        if (row.length > 0) {
          this.ruleForm = row[0]
          this.checkbox = row
          this.checked = true
        } else {
          this.checked = false
        }
      },
      // 编辑
      handleEdit (row) {
        // 判断是否勾选
        if (this.checked === true) {
          if (this.checkbox.length < 2) {
            this.addRoleDialogVisiable = true // 显示弹框
            this.editmetaid = true // sys_name input框禁止修改
            this.editsysid = false // icon_id input框禁止修改
            this.addRoleDialogMode = 'MODIFY' // 新增角色对话框模式 编辑模式
            this.currentItem = JSON.parse(JSON.stringify(this.ruleForm))
            this.ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
          } else {
            this.$message.error('只能选择一条')
          }
        } else {
          this.$message.error('请至少选择一条记录进行编辑')
        }
      },
      refresh () {
        this.handleSizeChange()
      },
      // 新增/修改 元事件
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const insertdata = {
              sys_name: this.ruleForm.sys_name,
              icon_id: this.ruleForm.icon_id,
              sys_no: this.ruleForm.sys_no,
              sys_url: this.ruleForm.sys_url
            }
            const updata = {
              sys_name: this.ruleForm.sys_name,
              icon_id: this.ruleForm.icon_id,
              sys_no: this.ruleForm.sys_no,
              sys_url: this.ruleForm.sys_url,
              id: this.ruleForm.id
            }
            if (this.addRoleDialogMode === 'ADD') {
              // 新增接口
              ajax.post(api.ADD_SYS_APP, insertdata).then((res) => {
                this.handleSizeChange()
                  this.$message({
                  type: 'success',
                  message: '添加成功!'
              })
                })
            } else if (this.addRoleDialogMode === 'MODIFY') {
              // 修改接口
              ajax.post(api.UPDATE_SYS_APP, updata).then((res) => {
                this.ruleForm = {}
                this.handleSizeChange()
                  this.$message({
                  type: 'success',
                  message: '编辑成功!'
            })
              })
            }
            this.addRoleDialogVisiable = false
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #eventManager
    .pd-left15
      padding-left 15px
    .el-select
      width 100%
    .mg15
      margin 15px 0
    .container-box
      .header-tool-bar
        padding-left 15px
        line-height 50px
</style>
